<div class="flex min-h-full">
    <AzimuttWeb.Components.Step.step steps={get_steps("About you")} />
    <div class="flex flex-col items-center justify-center px-4 py-12 mx-auto mt-0 sm:px-6 lg:px-8">
        <div>
            <%= render AzimuttWeb.LayoutView, "_flash.html", conn: @conn %>
            <%= render "_background_grid.html" %>
            <h2 class="text-2xl font-bold tracking-tight text-gray-900 md:text-3xl xl:text-4xl">What best describes your role?</h2>
            <p class="mt-6 mb-4 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-lg">
                Knowing our users is key to define and prioritize future developments. Some stats are a great start but don't hesitate to come and say hi!
            </p>
            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                <%= for role <- [
                    "Software Engineer", "Data Engineer",
                    "Product Manager", "Manager / CTO",
                    "Database Administrator", "DevOps/SRE",
                    "Architect"
                ] do %>
                    <%= link role, to: Routes.user_onboarding_path(@conn, :role_next, %{user_profile: %{role: role}}), method: :post,
                        class: "rounded-md bg-white px-3.5 py-2.5 mb-2 border border-gray-900 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-900 hover:text-white"
                    %>
                <% end %>
                <%= form_for @conn, Routes.user_onboarding_path(@conn, :role_next), [class: "mb-2 flex rounded-md shadow-sm ring-1 ring-inset ring-gray-900 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"], fn f -> %>
                    <span class="flex select-none items-center pl-3 text-gray-900 sm:text-sm">Other:</span>
                    <%= text_input f, "user_profile[role]", placeholder: "your role", required: true, class: "block flex-1 border-0 bg-transparent py-1.5 pl-2 text-gray-900 placeholder:text-gray-500 focus:ring-0 sm:text-sm sm:leading-6" %>
                    <%= submit "Next", class: "relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-900 hover:bg-gray-900 hover:text-white" %>
                <% end %>
            </div>
            <%= render "_error.html", changeset: @changeset %>
        </div>
    </div>
</div>
